<template>
	<div class="app-container">
		<el-main>
			<div>
				<el-form ref="searchForm" :inline="true" :model="searchForm" class="form-inline" size="mini">
					<search-form-box>
						<template slot="showSearch">
							<el-form-item prop="name">
								<label slot="label" v-html="'姓&emsp;&emsp;名:'" />
								<el-input v-model.trim="searchForm.name" clearable placeholder="请输入姓名" />
							</el-form-item>
							<el-form-item label="身份证号:" prop="id_no">
								<el-input v-model.trim="searchForm.id_no" clearable placeholder="请输入身份证号码" />
							</el-form-item>
							<el-form-item label="联系电话:" prop="mobile">
								<el-input v-model.trim="searchForm.mobile" clearable placeholder="请输入联系电话" />
							</el-form-item>
						</template>
						<template slot="hideSearch">
							<el-row>
								<el-col :span="24">
									<el-form-item label="接受调度:" prop="dispatch">
										<el-select v-model="searchForm.dispatch" clearable>
											<el-option value="0" label="否">否</el-option>
											<el-option value="1" label="是">是</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="接受出差:" prop="business_trip">
										<el-select v-model="searchForm.business_trip" clearable>
											<el-option value="0" label="否">否</el-option>
											<el-option value="1" label="是">是</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="接受加班:" prop="work_overtime	">
										<el-select v-model="searchForm.work_overtime" clearable>
											<el-option value="0" label="否">否</el-option>
											<el-option value="1" label="是">是</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="曾被应聘:" prop="employed">
										<el-select v-model="searchForm.employed" clearable>
											<el-option value="0" label="否">否</el-option>
											<el-option value="1" label="是">是</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="有亲朋在我司:" prop="employed_friends">
										<el-select v-model="searchForm.employed_friends" clearable>
											<el-option value="0" label="否">否</el-option>
											<el-option value="1" label="是">是</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-form-item label="考察期:">
									<el-col :span="11">
										<el-form-item prop="comp_fill_probation_min">
											<el-date-picker v-model="searchForm.comp_fill_probation_min" clearable
												type="date" placeholder="选择考察开始日期" format="yyyy年MM月dd日"
												value-format="yyyy-MM-dd" />
										</el-form-item>
									</el-col>
									<el-col class="txt-center" :span="2">~</el-col>
									<el-col :span="11">
										<el-form-item prop="comp_fill_probation_max">
											<el-date-picker v-model="searchForm.comp_fill_probation_max" clearable
												type="date" placeholder="选择考察结束日期" format="yyyy年MM月dd日"
												value-format="yyyy-MM-dd" />
										</el-form-item>
									</el-col>
								</el-form-item>
								<el-form-item label="考察期工资:">
									<el-col :span="11">
										<el-form-item style="margin-bottom: 0;" prop="comp_fill_probation_salary_min">
											<el-input v-model.trim="searchForm.comp_fill_probation_salary_min" clearable
												placeholder="请输入工资下限" />
										</el-form-item>
									</el-col>
									<el-col class="txt-center" :span="2">~</el-col>
									<el-col :span="11">
										<el-form-item style="margin-bottom: 0;" prop="comp_fill_probation_salary_max">
											<el-input v-model.trim="searchForm.comp_fill_probation_salary_max" clearable
												placeholder="请输入工资上限" />
										</el-form-item>
									</el-col>
								</el-form-item>
								<el-form-item label="入编后工资:">
									<el-col :span="11">
										<el-form-item style="margin-bottom: 0;" prop="comp_fill_salary_min">
											<el-input v-model.trim="searchForm.comp_fill_salary_min" clearable
												placeholder="请输入工资下限" />
										</el-form-item>
									</el-col>
									<el-col class="txt-center" :span="2">~</el-col>
									<el-col :span="11">
										<el-form-item style="margin-bottom: 0;" prop="comp_fill_salary_max">
											<el-input v-model.trim="searchForm.comp_fill_salary_max" clearable
												placeholder="请输入工资上限" />
										</el-form-item>
									</el-col>
								</el-form-item>
							</el-row>
						</template>
						<el-form-item slot="searchBtn">
							<el-button type="primary" plain @click="searchSubmit('searchForm')">搜索</el-button>
							<el-button type="info" plain @click="searchReset">重置</el-button>
						</el-form-item>
					</search-form-box>
				</el-form>
			</div>

			<el-row :gutter="20" type="flex" align="center">
				<el-col>
					<el-button v-permission="'entry_apply_add'" type="primary" size="small" @click.native="showAdd()">
						考察登记
					</el-button>
				</el-col>
			</el-row>
			<br>

			<el-table ref="multipleTable" v-loading="tabLoading" stripe :data="tableData" tooltip-effect="dark"
				style="width: 100%" :row-class-name="tableRowClassName" border
				:default-sort="{prop: 'date', order: 'descending'}" highlight-current-row row-key="id" size="mini">
				<el-table-column type="index" label="序号" align="center" width="50">
					<template slot-scope="scope">
						<span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="flow_status" label="流程状态" align="center" width="100">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.flow_status == 0" size="mini">暂存</el-tag>
						<el-tag v-else-if="scope.row.flow_status == 2" size="mini" type="danger">退回</el-tag>
						<el-tag v-else-if="scope.row.flow_status == 3" size="mini">
							{{ scope.row.flow_current_node_name }}</el-tag>
						<el-tag v-else-if="scope.row.flow_status == 4" size="mini" type="success">通过</el-tag>
						<el-tag v-else-if="scope.row.flow_status == 5" size="mini" type="danger">删除</el-tag>
						<el-tag v-else size="mini" type="info">未知</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="80" align="center" show-overflow-tooltip />
				<el-table-column prop="entry_dep" label="部门" width="200" align="center" show-overflow-tooltip />
				<el-table-column prop="entry_job" label="岗位" align="center" show-overflow-tooltip />
				<el-table-column prop="mobile" label="联系号码" width="120" align="center" show-overflow-tooltip />
				<el-table-column prop="id_no" label="身份证号" width="180" align="center" show-overflow-tooltip />

				<el-table-column prop="comp_fill_probation_start" label="考察开始" width="120" align="center"
					show-overflow-tooltip />
				<el-table-column prop="comp_fill_probation_end" label="考察结束" width="120" align="center"
					show-overflow-tooltip />
				<el-table-column prop="comp_fill_probation_salary" label="考察期工资(元)" width="120" align="center"
					show-overflow-tooltip />
				<el-table-column prop="comp_fill_salary" label="入编后工资(元)" width="120" align="center"
					show-overflow-tooltip />

				<el-table-column prop="dispatch" label="接受工作调度" width="120" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.dispatch == 1" size="mini" type="success">是</el-tag>
						<el-tag v-if="scope.row.dispatch == 0" size="mini" type="danger">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="dispatch" label="接受加班" width="100" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.work_overtime == 1" size="mini" type="success">是</el-tag>
						<el-tag v-if="scope.row.work_overtime == 0" size="mini" type="danger">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="dispatch" label="接受出差" width="100" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.business_trip == 1" size="mini" type="success">是</el-tag>
						<el-tag v-if="scope.row.business_trip == 0" size="mini" type="danger">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="dispatch" label="曾被应聘" width="100" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.employed == 1" size="mini" type="success">是</el-tag>
						<el-tag v-if="scope.row.employed == 0" size="mini" type="danger">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="dispatch" label="有亲属或朋友在我司工作" width="180" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.employed_friends == 1" size="mini" type="success">是</el-tag>
						<el-tag v-if="scope.row.employed_friends == 0" size="mini" type="danger">否</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="操作" width="120px" align="center" fixed="right">
					<template slot-scope="scope">
						<div class="operation">
							<el-button-group>
								<el-button v-permission="'entry_apply_view'" type="primary" icon="el-icon-zoom-in"
									size="mini" @click.native="viewDetails(scope.row.id)">查看
								</el-button>
							</el-button-group>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页数据 -->
			<el-pagination :current-page.sync="current" :page-sizes="[10, 20, 50, 100, 200, 500]"
				:page-size="listParams.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</el-main>

	</div>
</template>

<script>
	import {
		list
	} from '@/api/personnel/entry_apply'
	import {
		formatDateByFmt
	} from '@/utils/util.js'
	import SearchFormBox from '@/components/SearchFormBox'

	export default {
		name: 'EntryApplyList',
		components: {
			SearchFormBox
		},
		data() {
			return {
				// search form
				searchForm: {
					name: null,
					mobile: null,
					comp_fill_salary_min: null,
					comp_fill_salary_max: null,
					comp_fill_probation_salary_min: null,
					comp_fill_probation_salary_max: null,
					comp_fill_probation_min: null,
					comp_fill_probation_max: null,
					dispatch: null,
					business_trip: null,
					employed: null,
					employed_friends: null
				},
				// page option
				total: null, // 总页数
				current: 1, // 当前页

				// list table
				tableData: [], // 列表数据
				listParams: {
					page: 1,
					page_size: 10
				}, // list参数
				tabLoading: true
			}
		},
		created() {
			this.getList()
		},
		methods: {
			// 重置搜索表单
			searchReset() {
				this.$refs['searchForm'].resetFields()
				this.listParams = Object.assign(this.listParams, this.searchForm)
				this.getList()
			},
			// 搜索
			searchSubmit() {
				this.listParams.page = 1
				this.current = 1
				this.listParams = Object.assign(this.listParams, this.searchForm)
				this.getList()
			},

			handleDateRange(data, key, startKey, endKey) {
				if (data[key]) {
					data[startKey] = formatDateByFmt(data[key][0], 'yyyy-MM-dd')
					data[endKey] = formatDateByFmt(data[key][1], 'yyyy-MM-dd')
				}
				delete data[key]
			},

			// 跳转新增
			showAdd() {
				this.$router.push({
					name: 'entry_apply'
				})
			},
			viewDetails(id) {
				this.$router.push({
					name: 'entry_apply',
					params: {
						id: id
					}
				})
			},
			// 获得table列表
			getList() {
				this.tabLoading = true
				return list(this.listParams)
					.then(res => {
						const {
							data: {
								records,
								total
							}
						} = res
						this.tableData = records.map(item => {
							if (item.role_names) item.role_names = item.role_names.split(',')
							else item.role_names = []

							if (item.department_list) {
								item.departmen_list_name = item.department_list.map((item, index) => {
									return item.name + (item.job ? ('(' + item.job + ')') : '')
								}).join('、')
							}
							return item
						})
						this.total = total
						this.tabLoading = false
					})
					.catch(() => {
						this.tabLoading = false
					})
			},
			// 分页 -pageSize改变
			handleSizeChange(val) {
				this.listParams.page_size = val
				this.getList()
			},
			// 分页 -pageNum改变
			handleCurrentChange(val) {
				this.listParams.page = val
				this.getList()
			},
			// 带状态表格
			tableRowClassName({
				row
			}) {
				if (row.is_joined === 0) {
					return 'stop-row'
				}
				return ''
			}
		}
	}
</script>

<style scoped>
	.txt-center {
		text-align: center;
	}
</style>
